<template>
	<view class="nav">
		<view class="iconfont iconiconset0239"><text class="shot">随拍</text></view>
		<view :class="underline_index == 0 ? 'underline':''" @tap="change_index(0)">关注</view>
		<view :class="underline_index == 1 ? 'underline':''" @tap="change_index(1)">好友</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				underline_index: 0,
			};
		},
		onLoad() {},
		methods: {
			change_index(value) {
				this.underline_index = value;
				let url = "";
				if (value == 0) {
					url = "/pages/follow/follow";
				} else {
					url = "/pages/friend/friend";
				};
				uni.redirectTo({
					url
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.nav {
		width: 100%;
		height: 70rpx;
		position: relative;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40rpx;
		z-index: 20;
		background-color: #161725;

		.shot {
			padding-left: 16rpx;
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}

		>view {
			color: #C6C6D1;
			font-size: 40rpx;

			&:first-of-type {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				height: 100%;
				width: 180rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			// 给第一个二个view添加下划线
			&:not(:first-of-type) {
				position: relative;

				&::before {
					content: "";
					height: 4rpx;
					width: 0%;
					background-color: #FCCE21;
					position: absolute;
					left: 0rpx;
					bottom: -10rpx;
					z-index: 39;
					transition: .2s all ease .2s;
				}
			}

			&:nth-of-type(2) {
				place-self: center end;
			}

			&:nth-of-type(3) {
				place-self: center start;
			}
		}
	}

	// 显示下滑线
	.underline {
		color: #FFFFFF !important;

		&::before {
			width: 100% !important;
		}
	}
</style>
